<template>
    <view class="navbar-container-all">
        <!-- 占位元素，防止底部导航栏遮挡页面内容 -->
        <view class="navbar-placeholder" v-if="showPlaceholder"></view>

        <view class="bottom-navbar">
            <view class="nav-item" v-for="(item, index) in tabBarList" :key="index"
                :class="{ active: currentIndex === index }" @click="switchTab(item, index)">
                <!-- 活跃状态背景 -->
                <view v-if="currentIndex === index" class="active-bg"></view>

                <!-- 图标显示 -->
                <image v-if="item.iconPath && item.selectedIconPath && !item.isicon" class="nav-icon-img"
                    :src="currentIndex === index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>

                <uni-icons :type="currentIndex === index ? item.selectedIconPath : item.iconPath" size="26"
                    v-else-if="item.isicon" :color="currentIndex === index ? '#4CAF50' : '#666'"></uni-icons>
                <!-- 字体图标显示 -->
                <text v-else-if="item.icon" class="customicons nav-icon" :class="{ active: currentIndex === index }">{{
                    item.icon }}</text>
                <!-- 默认圆点图标 -->
                <view v-else class="nav-icon-dot" :class="{ active: currentIndex === index }"></view>

                <text class="nav-text" :class="{ active: currentIndex === index }">{{ item.text }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';

// 定义props
const props = defineProps({
    // 导航栏配置数组
    tabBarList: {
        type: Array,
        default: () => [
            {
                pagePath: 'pages/home',
                iconPath: '/static/tabbar/home2.png',
                selectedIconPath: '/static/tabbar/home.png',
                text: '首页',
                color: '#87CEEB'
            },
            {
                pagePath: 'pages/guide',
                pageUrl:'https://www.daolan.net.cn/h5/?shop_id=10205',
                iconPath: '/static/tabbar/guide2.png',
                selectedIconPath: '/static/tabbar/guide.png',
                text: '导览',
                color: '#87CEEB'
            },
            {
                pagePath: 'pages/user',
                iconPath: '/static/tabbar/my2.png',
                selectedIconPath: '/static/tabbar/my.png',
                text: '我的',
                color: '#87CEEB'
            }
        ]
    },
    // 当前选中的索引
    current: {
        type: [Number, String],
        default: 0
    },
    // 当前页面路径（用于自动匹配选中状态）
    currentPath: {
        type: String,
        default: ''
    },
    // 主题色配置
    color: {
        type: String,
        default: '#999999'
    },
    selectedColor: {
        type: String,
        default: '#56ab2f'
    },
    backgroundColor: {
        type: String,
        default: '#f5f5f5'
    },
    showPlaceholder: {
        type: Boolean,
        default: true
    }
});

// 定义emits
const emit = defineEmits(['change']);

// 当前选中的索引
const currentIndex = ref(0);

// 初始化当前选中项
const initCurrentIndex = () => {
    if (typeof props.current === 'number') {
        currentIndex.value = props.current;
    } else if (typeof props.current === 'string') {
        // 根据pagePath查找对应的索引
        const index = props.tabBarList.findIndex(item =>
            item.pagePath.includes(props.current) || props.current.includes(item.pagePath)
        );
        currentIndex.value = index >= 0 ? index : 0;
    }

    // 如果传入了currentPath，优先根据路径匹配
    if (props.currentPath) {
        const index = props.tabBarList.findIndex(item =>
            props.currentPath.includes(item.pagePath) || item.pagePath.includes(props.currentPath)
        );
        if (index >= 0) {
            currentIndex.value = index;
        }
    }
};

// 监听props变化
watch(() => props.current, () => {
    initCurrentIndex();
});

watch(() => props.currentPath, () => {
    initCurrentIndex();
});

// 切换tab
const switchTab = (item, index) => {
    if (currentIndex.value === index) return;

    currentIndex.value = index;
    emit('change', { item, index });

    // #ifdef H5
    if (currentIndex.value == 1) {
        window.location.href = item.pageUrl;
        return;
    }
    // #endif

    // 页面跳转
    const pagePath = item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`;

    // 如果是tabBar页面，使用switchTab
    if (item.isTabBar) {
        uni.switchTab({
            url: pagePath
        });
    } else {
        // 普通页面使用navigateTo
        uni.navigateTo({
            url: pagePath,
            fail: () => {
                // 如果navigateTo失败，尝试使用redirectTo
                uni.redirectTo({
                    url: pagePath
                });
            }
        });

    }
};

// 安全区域高度
const safeAreaInsetBottom = ref(0);

onMounted(() => {
    initCurrentIndex();

    // 如果没有传入currentPath，自动获取当前页面路径
    if (!props.currentPath) {
        const pages = getCurrentPages();
        if (pages.length > 0) {
            const currentPage = pages[pages.length - 1];
            const route = currentPage.route;

            const index = props.tabBarList.findIndex(item =>
                route.includes(item.pagePath) || item.pagePath.includes(route)
            );
            if (index >= 0) {
                currentIndex.value = index;
            }
        }
    }

    // 获取系统信息，计算安全区域
    // #ifdef APP-PLUS || MP-WEIXIN
    uni.getSystemInfo({
        success: (res) => {
            safeAreaInsetBottom.value = res.safeAreaInsets?.bottom || 0;
        }
    });
    // #endif
});
</script>

<style lang="scss" scoped>
.navbar-container-all {
    position: relative;
}

/* 占位元素样式 */
.navbar-placeholder {
    height: calc(120rpx + env(safe-area-inset-bottom));

    /* 不同平台的安全区域适配 */
    /* #ifdef APP-PLUS */
    height: calc(120rpx + env(safe-area-inset-bottom));
    /* #endif */

    /* #ifdef MP-WEIXIN */
    height: calc(120rpx + env(safe-area-inset-bottom));
    /* #endif */

    /* #ifdef H5 */
    /* iOS Safari 的安全区域支持 */
    @supports (height: env(safe-area-inset-bottom)) {
        height: calc(120rpx + env(safe-area-inset-bottom));
    }

    /* 不支持安全区域的浏览器回退 */
    @supports not (height: env(safe-area-inset-bottom)) {
        height: 120rpx;
    }

    /* #endif */
}

.bottom-navbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: inherit;
    display: flex;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 255, 248, 0.98));
    backdrop-filter: blur(20rpx);
    border-top: none;
    border-radius: 25rpx 25rpx 0 0;
    z-index: 1000;
    box-shadow: 0 -8rpx 32rpx rgba(144, 238, 144, 0.2);
    overflow: hidden;

    /* H5环境下适配页面宽度限制 */
    /* #ifdef H5 */
    /* 375px以下屏幕 */
    @media screen and (max-width: 374px) {
        width: 100%;
        left: 0;
        transform: none;
    }

    /* 375-749px屏幕 */
    @media screen and (min-width: 375px) and (max-width: 749px) {
        width: 100%;
        left: 0;
        transform: none;
    }

    /* 750-959px屏幕 */
    @media screen and (min-width: 750px) and (max-width: 959px) {
        width: 750px;
    }

    /* 960px及以上屏幕 */
    @media screen and (min-width: 960px) {
        width: 375px;
    }

    /* #endif */

    /* 非H5环境下使用全宽 */
    /* #ifndef H5 */
    left: 0;
    right: 0;
    transform: none;
    /* #endif */

    /* 安全区域适配 - 针对不同平台 */
    /* #ifdef APP-PLUS */
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    /* #endif */

    /* #ifdef MP-WEIXIN */
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    /* #endif */

    /* #ifdef H5 */
    /* iOS Safari 的安全区域支持 */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* 不支持安全区域的浏览器回退 */
    @supports not (padding-bottom: env(safe-area-inset-bottom)) {
        padding-bottom: 20rpx;
    }

    /* #endif */


    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 18rpx 0 8rpx 0;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
        border-radius: 20rpx;
        margin: 8rpx 6rpx;

        /* 活跃状态背景 */
        .active-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(144, 238, 144, 0.2));
            border-radius: 20rpx;
            z-index: -1;

            /* 顶部装饰线条 */
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60%;
                height: 6rpx;
                background: linear-gradient(90deg, transparent 10%, #2dd52a 30%, #2dd52a 70%, transparent 90%);
                border-radius: 0 0 6rpx 6rpx;
            }
        }

        .nav-icon-img {
            width: 60rpx;
            height: 60rpx;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
        }

        .nav-icon {
            font-size: 42rpx;
            color: #666;
            margin-bottom: 6rpx;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));

            &.active {
                color: #4CAF50;
                transform: scale(1.15) translateY(-2rpx);
            }
        }

        .nav-icon-dot {
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            background-color: #666;
            margin-bottom: 6rpx;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &.active {
                background-color: #4CAF50;
                transform: scale(1.3);
                box-shadow: 0 0 12rpx rgba(76, 175, 80, 0.4);
            }
        }

        .nav-text {
            font-size: 22rpx;
            color: #666;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;

            &.active {
                color: #4CAF50;
                font-weight: 600;
                transform: translateY(-1rpx);
            }
        }

        &.active {
            .nav-icon-img {
                transform: scale(1.15) translateY(-2rpx);
            }
        }

        &:active {
            transform: scale(0.95);
        }

        /* 悬停效果 */
        &:hover {
            background: rgba(144, 238, 144, 0.1);
        }
    }
}

/* 动画效果 */
@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-4rpx) rotate(5deg);
    }

    50% {
        transform: translateY(-2rpx) rotate(-3deg);
    }

    75% {
        transform: translateY(-6rpx) rotate(2deg);
    }
}

@keyframes sunGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes waveMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}
</style>
